<template>
<div>
  <el-table
    v-loading="mainDataLoading"
    :data="reset"
    @selection-change="handleSelectionChange"
    :header-cell-style="{background:'#f4f4f4'}"
    style="width: 100%">
     <el-table-column
      type="selection"
      align="center"
      width="50">
    </el-table-column>
    <el-table-column
      type="index"
      :index="indexMethod"
      align="center"
      label="序号"
      width="50">
    </el-table-column>
    <!-- <el-table-column
      label=""
      width="40"
      type="expand">
      <template slot-scope="scope">
          <el-table
            :header-cell-style="{background:'#eef1f6',color:'#909399'}"
            :data="scope.row.OrderFiles"
            border
            highlight-current-row
            style="width: 100%">
            <el-table-column
            type="index"
            align="center"
            label="序号"
            width="50">
            </el-table-column>
            <el-table-column
            prop="OrderFileCode"
            align="center"
            :show-overflow-tooltip="true"
            label="SN号">
            </el-table-column>
            <el-table-column
            prop="FileName"
            align="center"
            :show-overflow-tooltip="true"
            label="照片名称">
            </el-table-column>
            <el-table-column
            prop="TechRouteName"
            align="center"
            width="120"
            label="所属工艺路线">
            </el-table-column>
            <el-table-column
            prop="CurTechName"
            align="center"
            label="当前工序">
            </el-table-column>
            <el-table-column
            prop="NextTechName"
            align="center"
            label="下一道工序">
            </el-table-column>
            <el-table-column
            prop="address"
            align="center"
            label="内返次数">
            </el-table-column>
            <el-table-column
            prop="PhotoNum"
            align="center"
            label="创建时间">
            </el-table-column>
            <el-table-column
            prop="address"
            align="center"
            label="过站人">
            </el-table-column>
            <el-table-column
            prop="address"
            align="center"
            label="过站时间">
            </el-table-column>
        </el-table>
      </template>
    </el-table-column> -->
    <el-table-column
      prop="ProductionPlanNo"
      align="center"
      width="240"
      :show-overflow-tooltip="true"
      label="排程号">
    </el-table-column>
    <el-table-column
      prop="LineName"
      align="center"
      label="线体">
    </el-table-column>
    <el-table-column
      prop="SnCount"
      align="center"
      width="80"
      label="SN数量">
      <template scope="scope">
        <span @click="lookphoto(scope.row)" style="color: #0095FF;cursor:pointer">{{scope.row.SnCount}}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="PdfPageCount"
      align="center"
      label="页数"
      width="80">
    </el-table-column>
    <el-table-column
      prop="PrintTypeName"
      align="center"
      label="打印方式"
      width="150">
    </el-table-column>

    <el-table-column
      prop="OrderAutoPlanName"
      align="center"
      label="计划名"
      width="150">
    </el-table-column>

    <el-table-column
      prop="BoardName"
      align="center"
      label="模板名"
      width="150">
    </el-table-column>

    <el-table-column
      prop="MaterialName"
      align="center"
      :show-overflow-tooltip="true"
      label="相纸类型"
      width="100">
    </el-table-column>
    <el-table-column
      prop="StartPrintTime"
      align="center"
      :show-overflow-tooltip="true"
      label="开始打印时间">
    </el-table-column>
    <el-table-column
      prop="EndPrintTime"
      align="center"
      :show-overflow-tooltip="true"
      label="结束打印时间">
    </el-table-column>
    <el-table-column
      prop="StatusFormat"
      align="center"
      label="状态">
      <template slot-scope="scope">
        <i class="yuandian" v-if="scope.row.Status=== 2" style="backgroundColor:#0095FF"></i>
        <i class="yuandian" v-else-if="scope.row.Status=== 3" style="backgroundColor:#0095FF"></i>
        <i class="yuandian" v-else-if="scope.row.Status=== 4" style="backgroundColor:#F1022F"></i>
        <i class="yuandian" v-else-if="scope.row.Status=== 5" style="backgroundColor:#F1022F"></i>
        <i class="yuandian" v-else-if="scope.row.Status=== 6" style="backgroundColor:#0095FF"></i>
        <i class="yuandian" v-else-if="scope.row.Status=== 7" style="backgroundColor:#F1022F"></i>
        <i class="yuandian" v-else style="backgroundColor:#0de49c"></i>
        <span v-if="scope.row.Status=== 2" style="color:#0095FF">
          {{scope.row.StatusFormat}}
        </span>
        <span v-else-if="scope.row.Status=== 3" style="color:#0095FF">
          {{scope.row.StatusFormat}}
        </span>
        <span v-else-if="scope.row.Status=== 4" style="color:#F1022F">
          {{scope.row.StatusFormat}}
        </span>
        <span v-else-if="scope.row.Status=== 5" style="color:#F1022F">
          {{scope.row.StatusFormat}}
        </span>
        <span v-else-if="scope.row.Status=== 6" style="color:#0095FF">
          {{scope.row.StatusFormat}}
        </span>
        <span v-else-if="scope.row.Status=== 7" style="color:#F1022F">
          {{scope.row.StatusFormat}}
        </span>
        <span v-else style="color:#0de49c">
          {{scope.row.StatusFormat}}
        </span>
      </template>
    </el-table-column>
    <el-table-column
      prop="ScJindu"
      align="center"
      width="148"
      label="输出进度">
      <template slot-scope="scope">
        <el-progress
          :text-inside="true"
          :stroke-width="15"
          :percentage="scope.row.ScJindu">
        </el-progress>
      </template>
    </el-table-column>
    <!-- <el-table-column
      prop="address"
      align="center"
      :show-overflow-tooltip="true"
      label="剩余时长（H）"
      width="130">
    </el-table-column>     -->
    <!-- <el-table-column
      prop="CreateBy"
      label="创建人">
    </el-table-column> -->
    <el-table-column
      prop="CreateTime"
      align="center"
      :show-overflow-tooltip="true"
      label="创建时间">
    </el-table-column>
  </el-table>

  <!-- 照片明细弹出框 -->
  <el-dialog title="照片明细表" center :visible.sync="photoDialogLogVisible" :close-on-click-modal='false' width="730px">
    <el-table
      :data="tableData"
      border
      height="485"
      :header-cell-style="{background:'#f4f4f4'}"
      style="width: 100%">
      <el-table-column
        type="index"
        align="center"
        label="序号"
        width="49">
      </el-table-column>
      <el-table-column
        prop="OrderFileCode"
        align="center"
        label="SN号"
        width="130">
      </el-table-column>
      <el-table-column
        prop="FileName"
        align="center"
        label="照片名称"
        width="155">
      </el-table-column>
      <el-table-column
        prop="TechRouteName"
        align="center"
        label="所属工艺路线">
      </el-table-column>
      <el-table-column
        prop="CurTechName"
        align="center"
        label="当前工序">
      </el-table-column>
      <el-table-column
        prop="NextTechName"
        align="center"
        label="下一道工序">
      </el-table-column>

    </el-table>
  </el-dialog>

  </div>
</template>

<script>
import {getOrderFilesVoOfProductionPlan} from '@/api/startWorking'
  export default {
    props:{
      reset:{
        type:Array
      },
      mainDataLoading:{
        type:Boolean
      },
    },
    data() {
      return {
        tableData:[],
        photoDialogLogVisible:false,
        currentRow:{},
      }
    },
    // mounted(){
    //   this.loading = true;
    //   setTimeout(() => {
    //     this.loading = false;
    //   }, 1000);
    // },
    methods:{
      handleSelectionChange(val){
        this.$emit('changeData',val)
        let listId=[]
        val.forEach(el => {
          listId.push(el.ProductionPlanId)
        });
        this.$emit('getId',listId)
      },
      indexMethod(index){
        return (index+1)+(this.$parent.currentPage-1)*this.$parent.size
      },
      lookphoto(row){
        console.log(row);
        this.handleCurrentChange(row) ;
      },
      handleCurrentChange(row){
        this.currentRow = row;

        getOrderFilesVoOfProductionPlan({productionPlanId:this.currentRow.ProductionPlanId}).then(res => {
          if(parseInt(res.Code) === 1){
            this.photoDialogLogVisible = true
            this.tableData = res.Result
          }
        })
      },
    }
  }
</script>
<style>

.yuandian{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;

}
</style>
